<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>纯CSS选项卡</title>
  <link rel="stylesheet" href="./css/纯CSS选项卡.css">
</head>
<body>
  <div class="card">
    <input type="radio" name="select" id="slide_1" checked>
    <input type="radio" name="select" id="slide_2">
    <input type="radio" name="select" id="slide_3">
    <!-- 图片点击 -->
    <input type="checkbox" id="slide_img">
    <!-- 点击按钮 -->
    <div class="slide">
      <label for="slide_1" class="slide_btn_1"></label>
      <label for="slide_2" class="slide_btn_2"></label>
      <label for="slide_3" class="slide_btn_3"></label>
    </div>
    <!-- 主体内容 -->
    <div class="content">
      <label for="slide_img" class="pic">
        <!-- <div class="img_1"></div> -->
        <img src="./img/美女1.jpg" alt="" class="img_1">
      </label>
      <div class="txt txt_1">
        <h2 class="tit">SECTION1</h2>
        <p class="info">On earth there is nothing at but man; in the man there is nothing at but mind.</p>
        <button class="btn">Read More</button>
      </div>
    </div>

    <div class="content">
      <label for="slide_img" class="pic">
        <img src="./img/美女2.jpg" alt="" class="img_2">
      </label>
      <div class="txt txt_2">
        <h2 class="tit">SECTION2</h2>
        <p class="info">On earth there is nothing at but man; in the man there is nothing at but mind.</p>
        <button class="btn">Read More</button>
      </div>
    </div>

    <div class="content">
      <label for="slide_img" class="pic">
        <img src="./img/卡通-美女.jpg" alt="" class="img_3">
      </label>
      <div class="txt txt_3">
        <h2 class="tit">SECTION3</h2>
        <p class="info">On earth there is nothing at but man; in the man there is nothing at but mind.</p>
        <button class="btn">Read More</button>
      </div>
    </div>

  </div>
</body>
</html>